<template>
  <div>
    <van-search
      v-model="value"
      shape="round"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch(value)"
    >
      <template #left>
        <div @click="goBack">
          <van-icon name="arrow-left" style="font-size: 24px" />
        </div>
      </template>
      <template #action>
        <div @click="GO(value)">搜索</div>
      </template>
    </van-search>
    <div class="searchHistory">
      <span>搜索历史</span>
      <span>隐藏</span>
    </div>
    <div>
      <van-space
        :size="20"
        v-for="item in hotSearchList"
        style="margin: 5px; font-size: 12px"
      >
        <van-button class="btn" type="primary" @click="btn(item.keyword)">
          {{ item.keyword }}
        </van-button>
      </van-space>
    </div>

    <div class="searchHistory">
      <span>热门搜索</span>
      <span>隐藏</span>
    </div>
    <div>
      <van-space
        :size="20"
        v-for="item in hotSearchList"
        style="margin: 5px; font-size: 12px"
      >
        <van-button class="btn" type="primary" @click="btn(item.keyword)">
          {{ item.keyword }}
        </van-button>
      </van-space>
    </div>
  </div>
</template>

<script>
import { hotWord } from "../../service/pro.js";
export default {
  data() {
    return {
      value: "",
      hotSearchList: [],
    };
  },
  created() {
    // 热门搜索
    hotWord().then((res) => {
      //   console.log(res.data);
      if (res.data.code === "200") {
        this.hotSearchList = res.data.data;
        console.log(this.hotSearchList);
      }
    });
  },
  methods: {
    goBack() {
      history.back();
    },
    onSearch(value) {  // 搜索框回车可实现
      this.$router.push({
        path: "/searchResult",
        query: { val: value },
      });
    },
    GO(value) {
      console.log(value);
      this.$router.push({
        path: "/searchResult",
        query: { val: value },
      });
    },
    btn(val) {
      // console.log(val);
      this.$router.push({
        path: "/searchResult",
        query: { val: val },
      });
    },
  },
};
</script>
<style scoped>
.van-search {
  height: 50px;
  border-bottom: 1px solid rgb(216, 210, 210);
}
.searchHistory {
  height: 50px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  line-height: 50px;
  background: white;
}
.searchHistory > span:nth-child(2) {
  color: gray;
}
.btn {
  padding: 10px;
  font-size: 12px;
  background-color: #eeebeb;
  color: red;
  border: 0px;
}
</style>
